import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DatePipe } from "@angular/common";
import { Farm } from '../../../../entity/farm.model';
import { LimitedFarm } from "../limited-farm";

@Component({
    selector: 'app-wind-power-panel',
    templateUrl: './wind-power-panel.component.html',
    styleUrls: ['./wind-power-panel.component.css']
})
export class WindPowerPanelComponent implements OnInit, OnChanges {
    /**
     * echarts实例对象
     * 
     * @private
     * @type {*}@memberof RealtimePowerPanelComponent
     */
    private echartsIntance: any;
    public option: any;

    @Input()
    public currentFarm: LimitedFarm;

    /**
     * 跨度（天）
     * 
     * @type {number}@memberof WindPowerPanelComponent
     */
    @Input()
    public interval: number = 2;
    title: string = "风";
    seriesData: any[] = [];
    xAxisData: Date[] = [];
    maxNum: any = 25;
    constructor(
        private datePipe: DatePipe
    ) {


    }
    ngOnChanges(changes: SimpleChanges): void {
        if (changes.currentFarm && changes.currentFarm.currentValue) {
            this.update();

            //console.log(this.option)
        }
    }

    public update() {
        if (this.currentFarm.farmCategory == "winfarm") {
            this.maxNum = 25;
            this.title = "风";
        } else if (this.currentFarm.farmCategory == "photovoltaic") {
            this.maxNum = "none";
            this.title = "辐射";
        }
        this.seriesData = [];
        let legendData: string[] = [],
            farmCategory = this.currentFarm.farmCategory;
        let names = Object.getOwnPropertyNames(this.currentFarm.histories);
        names.forEach(name => {
            let history = this.currentFarm.histories[name];
            legendData.push(history.title);
            this.seriesData.push({
                name: history.title,
                type: 'line',
                smooth: true,
                symbol: "none",
                yAxisIndex: history.code
                    .toLowerCase()
                    .indexOf("AVERAGEWINDSPEED"
                        .toLowerCase()) > 0 ? 0 : 1,

                itemStyle: {
                    normal: {
                        color: history.color
                    }
                },
                areaStyle: {
                    normal: {},
                    opacity: 0.5
                },
                lineStyle: {
                    normal: {
                        width: 0
                    }
                },
                data: history.data
            });
        });
        this.option = {
            tooltip: {
                trigger: 'axis',
                formatter: (params, ticket, callback) => {
                    let result = this.datePipe.transform(new Date(params[0].data[0]), "yyyy-MM-dd HH:mm:ss") + "</br>";
                    params.forEach((item) => {
                        result += item.marker + item.seriesName + ":" + item.value[1] + "</br>";
                    });
                    return result;
                }
            },
            grid: {
                left: "5%",
                right: "8%",
                top: 50,
                bottom: 0,
                containLabel: true
            },
            legend: {
                data: legendData,
                right: "10%",
                //backgroundColor:"#8ee183",
                textStyle: {
                    color: "#8ee183"
                },
                padding: [10, 0]
            },
            calculable: true,
            xAxis: [
                {
                    type: 'time',
                    boundaryGap: false,
                    axisLabel: {
                        // 该属性的用来定义坐标轴的标签;
                        formatter: (value, index) => {
                            return index * 2;
                        },
                        textStyle: {
                            color: '#8ee183'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            opacity: 0.2
                        }
                    },
                    interval: 60000 * 60 * 2,
                    min: new Date(new Date().toLocaleDateString()),
                    max: new Date(new Date(new Date().toLocaleDateString()).getTime() + 172800000)
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    max: this.maxNum,
                    min: 0,
                    position: 'right',
                    // min: 0,
                    // max: 25,
                    axisLine: {
                        textStyle: {
                            color: '#8ee183'
                        }
                    },
                    nameTextStyle: {
                        color: '#8ee183',
                    },
                    splitLine: {
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                {
                    type: 'value',
                    position: 'left',
                    // min: -1000,
                    // max: 1000,
                    nameTextStyle: {
                        color: '#8ee183',
                    },
                    splitLine: {
                        lineStyle: {
                            opacity: 0.2
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                },
            ],
            series: this.seriesData
        }
        this.updateEchart();

    }

    ngOnInit() {
        ///this.update();
        //console.log(this.option)
    }
    /**
     * 初始化echarts实例
     * 
     * 
     * @memberof Echart2Component
     */
    onChartInit(ec: any) {
        this.echartsIntance = ec;
        this.updateEchart();
    }

    public updateEchart() {
        if (this.echartsIntance != null) {
            this.echartsIntance.setOption(this.option);
        }

    }


}


// WEBPACK FOOTER //
// ./src/app/module/monitor/main/wind-power-panel/wind-power-panel.component.ts